在App的首頁有規劃顯示任務完成情況的區域，讓使用者能清楚知道自己任務完成的進度。

接下來開始製作進度條，我需要製作二條進度條，一條紀錄地點篇任務情況，一條紀錄資訊聯絡篇任務情況。製作進度條有很多種方式，網路上也有多種不同效果的元件庫，我這次使用的是react-native-paper的ProgressBar。

Step1：呼叫出vscode的控制台

使用快速鍵control+` 或是將滑鼠移到vscode底部工具列上方邊界，當游標變成箭頭時，往上拖曳也可拉出控制台工作區

Step2：在控制台輸入npm i react-native-paper

此段指令可讓react-native-paper元件庫安裝進專案裡。

Step3：將ProgressBar標籤匯入

import {ProgressBar} from 'react-native-paper';

Step4：開始使用標籤

<ProgressBar progress={value} style={styles.probarStyle} color={'#FEBC5F'}/> 

ProgressBar標籤內有幾個參數需要設定：
1. progress
此項參數用來設定進度條進度的數值，數值範圍為0-1，0代表進度為零，1則代表進度已完成，在這裡設了一個變數來儲存任務完成進度。

2. style
此項參數用來設定樣式，可設定進度條的長度、寬度以及底色。

const styles = StyleSheet.create({
  probarStyle: {
    width: 162,
    height: 8,
    backgroundColor: "#E0E0E0"
  },
});

3.color
此項參數用來設定顯示進度值區域的顏色，在這裡設定成橘色。

最後再用標籤為進度條加上文字說明就完成了，成品如圖